<template>
  <div>
    <div class="item-head">
      <router-link class="mui-icon mui-icon-extra mui-icon-extra-cart" tag="span" to="/cart">
        <span class="mui-badge">{{ $store.getters.getTotalNum}}</span>
      </router-link>
    </div>
    <!-- 轮播图 -->
    <mt-swipe :auto="0" :show-indicators="true" :loop="true">
      <mt-swipe-item>
        <a href="#">
          <img src alt>
        </a>
      </mt-swipe-item>
      <mt-swipe-item>
        <a href="#">
          <img src alt>
        </a>
      </mt-swipe-item>
      <mt-swipe-item>
        <a href="#">
          <img src alt>
        </a>
      </mt-swipe-item>
      <mt-swipe-item>
        <a href="#">
          <img src alt>
        </a>
      </mt-swipe-item>
    </mt-swipe>
    <div v-for="item in itemDetail" :key="item.gid" class="itemInfo-box">
      <div class="itemInfo">
        <div class="price">
          <p>
            <span>￥</span>
            <b>{{ item.price}}</b>
          </p>
          <p>
            价格
            <s>{{ item.origin_price }}</s>
          </p>
        </div>
        <div class="title">{{ item.description }}</div>
        <select-box @p_close="close" v-if="selectBoxFlag" :p_stock="item.stock" :p_gid="clickId"></select-box>
      </div>
      <div class="goodsInfo">
        <ul class="mui-table-view mui-table-view-chevron">
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <div class="mui-media-object mui-pull-left">服务</div>
              <div class="mui-media-body">
                <p class="mui-ellipsis">极速退货 · 正品保证 · 急速退款</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right" href="javascript:;" @click="add(item.gid)">
              <div class="mui-media-object mui-pull-left">规格</div>
              <div class="mui-media-body">
                <p class="mui-ellipsis">选择 尺码</p>
              </div>
            </a>
          </li>
          <li class="mui-table-view-cell mui-media">
            <a class="mui-navigate-right">
              <div class="mui-media-object mui-pull-left">参数</div>
              <div class="mui-media-body">
                <p class="mui-ellipsis">品牌 ...</p>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <mt-button type="primary" plain size="large" @click="detail(item.gid)">宝贝详情</mt-button>
      <div class="my-button" v-show="selectBoxFlag?false:true">
        <!-- 解决手机试用button不出现的问题 -->
        <el-button type="warning" @click="add(item.gid)">加入购物车</el-button>
        <el-button type="danger" @click="buy(item.gid)">立即购买</el-button>
        <!-- <button type="button" class="mui-btn mui-btn-warning" @click="add(item.gid)">加入购物车</button>
        <button type="button" class="mui-btn mui-btn-danger" @click="buy(item.gid)">立即购买</button> -->
      </div>
    </div>
  </div>
</template>

<script>
import mui from "../../../lib/mui/js/mui.min.js";
import goodsSelectBox from "../../subcomponents/goodsSelectBox.vue";
export default {
  data() {
    return {
      title: "商品详情",
      // 接收传过来的商品id,用于发送http请求获取商品详情
      // gid: this.$route.gid,
      // 模拟商品详情数据
      goodsDetail: [
        {
          gid: "001001",
          goodsName: "XX品牌XX东西XX类型XX风格XXXX",
          price: "299",
          color: [
            { cid: "c001", cvalue: "黑色" },
            { cid: "c002", cvalue: "深蓝" },
            { cid: "c003", cvalue: "浅蓝" }
          ],
          size: [
            { sid: "s001", svalue: "28" },
            { sid: "s002", svalue: "29" },
            { sid: "s003", svalue: "30" },
            { sid: "s004", svalue: "31" },
            { sid: "s005", svalue: "32" },
            { sid: "s006", svalue: "33" },
            { sid: "s007", svalue: "34" },
            { sid: "s008", svalue: "35" },
            { sid: "s009", svalue: "36" }
          ],
          num: "1",
          description:
            "好东西，这东西真真是极好的，不买不知道，买了不吃亏，买了还想买，你要不要买，反正好多人买",
          origin_price: "599",
          stock: "199"
        },
        {
          gid: "001002",
          goodsName: "XX品牌YY东西YY类型YY风格YYY",
          price: "399",
          color: [
            { cid: "c001", cvalue: "黄色" },
            { cid: "c002", cvalue: "蓝色" },
            { cid: "c003", cvalue: "白色" }
          ],
          size: [
            { sid: "s001", svalue: "XS" },
            { sid: "s002", svalue: "S" },
            { sid: "s003", svalue: "M" },
            { sid: "s004", svalue: "L" },
            { sid: "s005", svalue: "XL" },
            { sid: "s006", svalue: "XXL" }
          ],
          num: "1",
          description:
            "好东西，这东西真真是极好的，不买不知道，买了不吃亏，买了还想买，你要不要买，反正好多人买",
          origin_price: "699",
          stock: "999"
        },
        {
          gid: "002001",
          goodsName: "ZZ品牌XX东西XX类型XX风格wwww",
          price: "499",
          color: [
            { cid: "c001", cvalue: "绿色" },
            { cid: "c002", cvalue: "粉色" },
            { cid: "c003", cvalue: "白色" }
          ],
          size: [
            { sid: "s001", svalue: "XS" },
            { sid: "s002", svalue: "S" },
            { sid: "s003", svalue: "M" },
            { sid: "s004", svalue: "L" },
            { sid: "s005", svalue: "XL" },
            { sid: "s006", svalue: "XXL" }
          ],
          num: "1",
          description:
            "好东西，这东西真真是极好的，不买不知道，买了不吃亏，买了还想买，你要不要买，反正好多人买",
          origin_price: "599",
          stock: "999"
        }
      ],
      goodsObj: {},
      selectBoxFlag: false,
      p_stock: "",
      p_gid: "",
      clickId: "",
      gid: this.$route.params.gid,
      itemDetail: []
    };
  },
  created() {
    this.show(this.title);
    this.getItemDetail(this.gid);
  },
  mouted() {
    mui.init();
    // mui(".mui-numbox").numbox();
  },
  methods: {
    show(title) {
      this.$emit("getTitle", title);
    },
    /* 传入商品id和店铺id，发送http请求获取商品可选参数*/
    add(id) {
      // console.log("123");
      this.selectBoxFlag = true;
      this.clickId = id;
    },
    close() {
      this.selectBoxFlag = false;
    },
    getItemDetail(id) {
      var res = this.goodsDetail;
      res.some((ele, index) => {
        if (ele.gid == id) {
          this.itemDetail.push(ele);
          // console.log(this.itemDetail)
          return this.itemDetail;
        }
      });
    }
  },
  components: {
    "select-box": goodsSelectBox
  }
};
</script>

<style lang="scss" scoped>
$baseColor: #26a2ff;

.item-head {
  .mui-icon-extra-cart {
    position: fixed;
    right: 15px;
    top: 7px;
    z-index: 999;
    color: #fff;
    font-size: 22px;
  }
}
.mint-swipe {
  height: 350px;
  .mint-swipe-item {
    &:nth-of-type(1) {
      background: #769164;
    }
    &:nth-of-type(2) {
      background: orange;
    }
    &:nth-of-type(3) {
      background: green;
    }
    &:nth-of-type(4) {
      background: plum;
    }
  }
}
.itemInfo-box{
  overflow-y: auto;
}
.itemInfo {
  background: #fff;
  .price {
    padding: 15px 10px 10px;
    p {
      padding: 0;
      margin: 0;

      &:nth-of-type(1) {
        color: red;
      }
      b {
        font-size: 18px;
      }
    }
  }
  .title {
    padding: 0 50px 15px 10px;
    font-size: 14px;
    font-weight: 700;
  }
}
.goodsInfo {
  margin: 10px 0;
  .mui-table-view {
    &::before {
      height: 0;
    }
    &::after {
      height: 0;
    }
    .mui-table-view-cell {
      &::after {
        height: 0;
      }
      padding-top: 5px;
      padding-bottom: 5px;
      .mui-navigate-right {
        vertical-align: middle;
        line-height: 40px;
        .mui-media-object {
          font-size: 12px;
          color: #8f8f94;
        }
        .mui-media-body {
          p {
            color: #000;
          }
        }
      }
    }
  }
}
.select-box {
  display: none;
  background: #fff;
  border-radius: 10px 10px 0 0;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 998;
  .close {
    position: absolute;
    top: 5px;
    right: 5px;
    span {
      color: #bbb;
    }
  }
  .hd {
    padding: 10px;
    display: flex;
    .hd-left {
      width: 100px;
      height: 100px;
      background: skyblue;
    }
    .hd-right {
      flex: 1;
      vertical-align: middle;
      padding: 20px 0 0 10px;
      p:first-of-type {
        color: red;
        b {
          font-size: 18px;
        }
      }
    }
  }
  .bd {
    padding: 10px;
    .color,
    .size,
    .number {
      margin: 10px 0;
    }
    .color,
    .size {
      p {
        color: #000;
      }
      span {
        height: 30px;
        width: 50px;
        background: #eee;
        display: inline-block;
        line-height: 30px;
        text-align: center;
        border-radius: 5px;
        margin-bottom: 5px;
        font-size: 12px;
        &.selected {
          color: #fff;
          background: $baseColor;
        }
      }
    }
    .size {
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      padding: 10px 0;
    }
    .number {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      vertical-align: middle;
      span {
        line-height: 25px;
      }
      .mui-numbox {
        border: none;
        background: #eee;
        height: 25px;
        .mui-input-numbox {
          background: #eee;
          border: none !important;
        }
      }
    }
  }
  .my-button {
    margin-bottom: 10px;
    position: static;
  }
  transition: all 4s ease;
}
.toggle {
  display: none;
}
.mint-button {
  background: #fff;
  margin: 10px 0;
}
.my-button {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  z-index: 666;
  font-size: 18px;
  .el-button {
    flex: 50%;
    height: 100%;
    margin: 0;
  }
}
</style>
